<template>
  <div>
    <div>
      <mt-header title="编辑联系人" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div>
      <mt-field label="姓名：" placeholder="请输入姓名" v-model="username"></mt-field>
    </div>
    <div>
      <mt-field label="手机号：" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
    </div>
    <div>
      <mt-field label="身份证号：" placeholder="请输入身份证号" type="number" v-model="number"></mt-field>
    </div>
    <div class="newfixed-title">
      <mt-radio title="性别" v-model="values2" :options="options">
      </mt-radio>
    </div>
    <mt-cell is-link @click.native="open('picker1')">
      <span slot="title">出生日期：</span>
      <span>{{birthday}}</span>
    </mt-cell>
    <div>
      <mt-datetime-picker ref="picker1" type="date" v-model="value1" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :startDate="startDate" :endDate="endDate" @confirm="handleChange">
      </mt-datetime-picker>
    </div>

    <div class="add-contacs-button">
      <button class="mint-button mint-button--default mint-button--large is-plain" @click="saveInformation()">
        <label class="mint-button-text">保存</label>
      </button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { format } from "../../common/js/formatDate";
export default {
  data() {
    return {
      cid: this.$route.query.rq,
      username: "",
      phone: "",
      number: "",
      sex: "",
      birthday: "选择出生日期",
      value: null,
      value1: null,
      values2: null,
      startDate: new Date("1900-1-1"),
      endDate: new Date(),
      options: [
        {
          label: "男",
          value: "男"
        },
        {
          label: "女",
          value: "女"
        }
      ]
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  mounted() {
    axios({
      method: "post",
      url: "/api/cylxredit/detail.htm",
      params: {
        cid: this.cid
      }
    }).then(res => {
      res = res.data;
      if (res.zt === "true") {
        console.log(res);
        this.username = res.data.mc;
        this.phone = res.data.sjh;
        this.number = res.data.sfz;
        this.values2 = res.data.xb;
        this.birthday = res.data.sr;
        this.value1 = res.data.sr;
      } else {
        Indicator.close();
        let instance = Toast({
          message: "加载失败"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      }
    });
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    open(picker) {
      this.$refs[picker].open();
    },
    handleChange(value) {
      this.birthday = value.toString();
      let a = format(value, "yyyy-MM-dd");
      this.birthday = a.toString();
      console.log(this.birthday);
      Toast({
        message: "已选择" + value.toString(),
        position: "bottom"
      });
    },
    saveInformation() {
      //手机号正则表达式
      let sjreg = /^1[3|4|5|7|8][0-9]{9}$/;
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let sfzreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      let zwm = this.username;
      let sjh = this.phone;
      let sfz = this.number;
      let zxb = this.values2;
      let sr = this.value1;

      if (
        zwm === "" ||
        zwm === null ||
        (sjh === "" || sjh === null) ||
        (sfz === "" || sfz === null)
      ) {
        Indicator.close();
        let instance = Toast({
          message: "姓名、手机、身份证号不能为空"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
        return;
      } else {
        if (sjreg.test(sjh)) {
          if (sfzreg.test(sfz)) {
            let global_members_id = JSON.parse(
              localStorage.getItem("global_members_id")
            );
            axios({
              method: "post",
              url: "/api/mycyxxcylxr/detail.htm",
              params: {
                id: global_members_id,
                cid: this.cid,
                mc: zwm,
                py: "",
                sjh: sjh,
                sfz: sfz,
                tbz: "",
                hz: "",
                gatxz: "",
                rtz: "",
                jgz: "",
                sr: sr,
                xb: zxb
              }
            }).then(res => {
              res = res.data;
              if (res.zt === "true") {
                history.go(-1);
                Indicator.close();
                let instance = Toast({
                  message: "保存成功"
                });
                setTimeout(() => {
                  instance.close();
                }, 2000);
              } else {
                Indicator.close();
                let instance = Toast({
                  message: "加载失败"
                });
                setTimeout(() => {
                  instance.close();
                }, 2000);
              }
            });
          } else {
            Indicator.close();
            let instance = Toast({
              message: "身份证号格式不正确"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
            return;
          }
        } else {
          Indicator.close();
          let instance = Toast({
            message: "手机号格式不正确"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
          return;
        }
      }
    }
  }
};
</script>
<style scoped>
.add-contacs-button {
  height: 60px;
  padding: 50px 10%;
}
</style>

  
